<script setup lang="ts">
import { reactive } from 'vue';
var top_text = '<h3>张三</h3>';
var data = reactive([
{"id":3,"name":"懒人小沙发","describe":"舒适休闲，完善支撑","price":126.4,"isHot":1}, 
{"id":4,"name":"减压弹力球","describe":"释放压力，放松身心","price":95.2}, 
{"id":5,"name":"简约一字发夹","describe":"简约设计，百搭款式","price":15.9}, 
{"id":6,"name":"毛线小兔子耳朵发夹","describe":"可爱萌趣，精致做工","price":12.7}, 
{"id":7,"name":"华为畅享 60X","describe":"7000mA 大电池鸿蒙系统","price":688,"isHot":1}
]); 
</script>
<template>
<div class="top" >
  <!-- 搜索区域 -->
  <div class="search-container">
    <input type="text" placeholder="搜一搜">
    <button>确认</button>
  </div>
  <!-- 用户信息区域 -->
  <div class="top_h3" v-html="top_text"></div>
</div>

<h1 class="list_tit">商品列表</h1>

<div class="list">
  <div class="list_ul">
    <!-- 循环展示商品列表 -->
    <div class="list_li" v-for="(item, index) in data" :key="item.id + index">
      <div class="li_img">商品图片</div>
      <p v-text="item.name"></p>
      <span v-text="item.describe"></span>
      <h3>
        {{ item.price }} 
        <span class="isHot" v-if="item.isHot">热销</span>
      </h3>
    </div>
  </div>
</div>
</template>
<style scoped>
.top{
  height: 53px;
  background: #333;
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center;
  padding: 0 10px; /* 左右内边距，避免内容贴边 */
}

/* 搜索区域容器 */
.search-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 输入框和按钮之间的间距 */
}

.top input{
  padding-left: 5px;
  color: #666;
  width: 150px;
  height: 32px;
  border-radius: 10px;
  border: none; /* 移除默认边框 */
}

.top button{
  padding: 0 5px;
  color: #666;
  width: 50px;
  height: 35px;
  border-radius: 10px;
  border: none;
  cursor: pointer; /* 鼠标悬停显示手型 */
}

/* 用户信息区域 */
.top_h3{
  font-weight: 100;
  color: #f2f2f2;
  text-align: end;
  white-space: nowrap; /* 防止文字换行 */
}

.list_tit{
  width: 1280px;
  margin: 30px auto 50px;
}

.list{
  width: 100%;
  display: flex;
  justify-content: center;
}

.list_ul{
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px; /* 商品卡片之间的间距 */
}

.list_li{
  position: relative;
  width: 300px;
  border-radius: 5px;
  height: 300px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 增加轻微阴影 */
}

.li_img{
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #ABE1CC;
}

.list_li p{
  font-size: 18px;
  line-height: 30px;
  padding: 0 10px;
}

.list_li span{
  display: block;
  font-size: 14px;
  color: #888;
  padding: 0 10px;
}

.list_li h3{
  font-size: 28px;
  color: #CF4444;
  line-height: 60px;
  padding: 0 10px;
  margin: 0;
}

.list_li .isHot{
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #CF4444;
  border-radius: 10px;
  bottom: 30px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
  font-size: 14px;
}
</style>
